<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Layout Example</title>
    <script
      type="text/javascript"
      src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
    ></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="../dist/tn-element-ui.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="./examples.css" /> -->
    <style></style>
  </head>

  <body class="tn-background-normal">
    <script type="x-template" id="tn-body">
      <tn-h-box content-spacing>
        <tn-flex-item size="20%" class="tn-background-grey" cellspacing>
        </tn-flex-item>
        <tn-splitter></tn-splitter>
        <tn-v-box size="auto" bordered>
          <tn-flex-item size="300px" style="max-height: 400px;" class="tn-background-grey">
          </tn-flex-item>
          <tn-splitter></tn-splitter>
          <tn-flex-item size="auto" class="tn-background-grey">
          </tn-flex-item>
        </tn-v-box>
        <tn-splitter :dragable="false"></tn-splitter>
        <tn-v-box size="20%" cellspacing>
          <tn-flex-item size="1" class="tn-background-grey">
          </tn-flex-item>
          <tn-splitter></tn-splitter>
          <tn-flex-item size="1" class="tn-background-grey">
          </tn-flex-item>
          <tn-splitter></tn-splitter>
          <tn-flex-item size="1" class="tn-background-grey">
          </tn-flex-item>
        </tn-v-box>
      </tn-h-box>
    </script>

    <div id="app" class="tn-absolute-fit tn-flex-box" direction="column">
      <h2>Flex Layout</h2>
      <layout size="1"></layout>
    </div>

    <script type="text/javascript">
      var Layout = Vue.component('Layout', {
        template: '#tn-body',
      })
      var app = new Vue({
        el: '#app',
        components: {
          layout: Layout,
        },
      })
    </script>
  </body>
</html>
